<template>
	<el-row>
		<el-col :span="24">
			<div>
				<div id="all">
					<el-input size="mini" v-model="input" placeholder="请输入专题标题" clearable style="width: 320px;"
						@clear="topic()">
					</el-input>
					<el-input size="mini" v-model="inpute" placeholder="请输入专题子标题" clearable
						style="width: 320px;margin-left: 3px;" @clear="topic()">
					</el-input>
					<el-select size="mini" v-model="value2" placeholder="请选择优惠券状态"
						style="width: 320px;margin-left: 3px;">
						<el-option v-for="item in val2" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					</el-input>
					<el-button size="mini" type="primary" icon="el-icon-search" class="search" @click="topic()">查找
					</el-button>
					<!-- //导出 -->
					<div class="home">
						<download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" type="xls"
							worksheet="My Worksheet" name="专题管理">
							<el-button size="mini" type="primary" icon="el-icon-download">导出</el-button>
						</download-excel>
					</div>
				</div>
				<div style="text-align: right;margin-bottom: 5px;">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="add()">添加
					</el-button><!-- @click="dialogFormVisible = true" -->
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="batcDele">批量删除</el-button>
					<!-- @click="batcDele" -->
				</div>


				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="title" label="专题标题">
					</el-table-column>
					<el-table-column prop="subtitle" label="专题子标题" width="400px">
					</el-table-column>
					<el-table-column prop="picUrl" label="图片">
						<template slot-scope="scope">
							<img width="80px" height="80px" :src="scope.row.picUrl" v-if="scope.row.picUrl" />
						</template>
					</el-table-column>
					<el-table-column prop="content" label="专题详情">
						<template slot-scope="scope">
							<!--如果要用到scope.$index, scope.row，则需要加上slot-scope="scope"才能拿到值-->
							<el-button type="primary" size="mini" @click="see(scope.$index, scope.row)">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="底价">
					</el-table-column>
					<el-table-column prop="readCount" label="阅读数量">
					</el-table-column>
					<el-table-column prop="operation" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
							</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>


				<!-- //分页 -->
				<div>
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="ljq.page" :page-sizes="[5, 10, 15, 20]" :page-size="ljq.num"
						layout="total, sizes, prev, pager, next, jumper" :total="ljq.total">
					</el-pagination>
				</div>


				<!-- //点击查看--弹框 -->
				<el-dialog title="提示" :visible.sync="centerDialogVisible" width="42%" center>
					<span v-html="html" style="text-align: center;"></span>
				</el-dialog>


			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		topicList,
		topicDelete,
		topicbatchDelete
	} from '../../utils/axios.js'
	export default {
		data() {
			return {
				tableData: [],
				multipleSelection: [],



				//分页
				ljq: {
					page: 1, //默认前往几页
					num: 20, //默认一页几条
					total: 0 //共几条
				},



				//头部
				input: '',
				inpute: '',
				value2: 0,
				val2: [{
						label: "按序号排序",
						value: 0
					},
					{
						label: "按时间排序",
						value: 1
					},
					{
						label: "按价格排序",
						value: 2
					}
				],

				//导出
				json_fields: {
					专题ID: "id", //常规字段
					专题标题: "title", //支持嵌套属性
					专题子标题: "subtitle", //支持嵌套属性
					专题内容: "content", //支持嵌套属性
					专题图片: {
						field: "picUrl",
						//自定义回调函数
						callback: value => {
							return `+86 ${value}`;
						}
					},
					商品低价: "price", //支持嵌套属性
					阅读量: "readCount", //支持嵌套属性
					// 专题商品: "limit", //支持嵌套属性
				},

				//点击查看
				centerDialogVisible: false,
				html: ''
			}
		},
		created() {
			this.topic()
		},
		methods: {
			//查看
			see(index, row) {
				// console.log(row)
				this.centerDialogVisible = true
				this.html = row.content
			},


			//批量删除点击选中获取的数据
			handleSelectionChange(val) {
				let all = [];
				for (var i = 0; i < val.length; i++) {
					all.push(val[i].id)
				}
				this.multipleSelection = all
			},

			//列表渲染
			topic() {
				topicList(this.ljq.page, this.ljq.num, this.input, this.inpute).then(res => {
					// console.log(res);
					this.tableData = res.data.data.list
					this.ljq.total = res.data.data.total
				})
			},

			//刷新
			refresh() {
				this.$router.push({
					path: '/SkipBlank',
					query: {
						path: this.$route.path
					}
				})
			},


			//分页
			handleSizeChange(new_num) {
				// console.log(newnum)
				this.ljq.num = new_num
				this.topic()
			},
			handleCurrentChange(new_page) {
				this.ljq.page = new_page
				this.topic()
			},



			//编辑页面
			handleEdit(index, row) {
				console.log(index, row);
				let obj = {
					id : row.id,
					title : row.title,
					subtitle : row.subtitle,
					picUrl : row.picUrl,
					content : row.content,
					price : row.price,
					readCount : row.readCount,
					goods : row.goods
				}
				let objs = JSON.stringify(obj)
				sessionStorage.setItem("obj",objs)
				this.$router.push('/Index/Edit')
			},



			//删除
			handleDelete(index, row) {
				console.log(index, row);
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					topicDelete(row).then(res => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
						this.topic() //删除后重新渲染
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//批量删除
			batcDele() {
				// console.log(this.multipleSelection)
				let data = {
					ids: this.multipleSelection
				}
				if(this.multipleSelection.length == 0){
					this.$message('请选择要删除的商品');
				}else{
					this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						topicbatchDelete(data).then(res => {
							this.$notify({
								title: '成功',
								message: '删除管理员成功',
								type: 'success'
							});
							this.topic() //删除后重新渲染
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},

			//添加页面
			add() {
				this.$router.push('/Index/Add')
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	/* //字体居中 */
	/deep/.cell {
		text-align: center;
	}


	.active {
		background-color: #409EFF;
	}

	/* //头部搜索 */
	#all {
		display: flex;
		width: 40% !important;
		margin-bottom: 10px;
	}

	.search {
		margin-left: 3px !important;
	}


	#all .el-input .el-input__inner {
		background-color: #FFFFFF !important;
		caret-color: #434343 !important;
		color: #999999 !important;
		border: 1px solid #b9b9b9 !important;
	}

	/* //导出 */
	.home {
		height: 100%;
		background-color: rgb(128, 126, 126);
		border-radius: 6px;
		margin-left: 10px;
	}
</style>
